<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>基本列表</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        v-for指令:
        1.用于展示列表数据
        2.语法: v-for="(item,index) in xxx" : key="yyy"
        3.可遍历:数组、对象、字符串（用的很少)、指定次数（用的很少) 
    -->
    <div id="app">
        <!-- 遍历数组 -->
        <h3>人员列表</h3>
        <ul>
            <li v-for="(p,index) in persons" :key="index">
                {{p.name}}-{{p.age}}
            </li>
        </ul>
        <hr/>

        <!-- 遍历对象 -->
        <h3>汽车信息</h3>
        <ul>
            <li v-for="(value,key) in cars" :key="key">
                {{key}}-{{value}}
            </li>
        </ul>
    </div>
    <script>
    //配置完全局配置之后再创建Vue实例,关闭Vue的生产提示标识
     Vue.config.productionTip = false;
        var vm = new Vue({
           el:'#app',
           data:{
               persons: [
                   {id: '001',name: '张三',age: 18},
                   {id: '002',name: '李四',age: 19},
                   {id: '003',name: '王五',age: 20}
               ],
               cars: {
                   name: '奥迪A8',
                   price: '70万',
                   color: '黑色'
               }
           },
           methods:{}
        });
    </script>
</body>

</html>